#{extends 'main.html' /} #{set title:'Taxi Sharing Showcase
Application'/}

<!--  MARKUP CODE -->
<header>
#{headerBar/}
</header>
<div id="main-wrapper">
<div id="map-container"></div>
<div id="trip-definition">
<div id="route-section">
<div id="route-input-section">
	<div class="section-title"><span>1. Choose your route</span></div>
	#{routeForm/}
</div>
<div id="route-details-section">#{routeDescription/}</div>
<div id="mate-section">
	<div class="section-separator"></div>
	<div class="section-title"><span>2. Choose your partners</span></div>
	#{routeMates/}
	</div>
</div>
</div>
</div>
<div id="dialog"></div>

<!--  Bottom layer with main navigation -->
<nav id="main-nav"">

</nav>

<script type="text/javascript" charset="utf-8">
	// Main object initialization
	window.taxi = {};
</script>
<!-- Templates -->
#{routeSteps/}
<!-- Begin with scripts -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
<script src="@{'/public/javascripts/libs/modernizr-1.6.min.js'}"
	type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="@{'/public/javascripts/logging.js'}" type="text/javascript"
	charset="utf-8"></script>
<script type="text/javascript"
	src="@{'/public/javascripts/libs/mustache.js'}"></script>
<script src="@{'/public/javascripts/ResultHandler.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/Address.js'}" type="text/javascript"
	charset="utf-8"></script>
<script src="@{'/public/javascripts/PartnerManager.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/Route.js'}" type="text/javascript"
	charset="utf-8"></script>
<script src="@{'/public/javascripts/RouteStep.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/RouteManager.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/RemoteEngine.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/SFFareCalculator.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/maps/GoogleMapsUtils.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/maps/GoogleMapsGeocoder.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/maps/GoogleMapsViewer.js'}"
	type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/TaxiEngine.js'}"
	type="text/javascript" charset="utf-8"></script>

<!-- JAVACRIPT -->
<!-- Begin custom code -->
<script type="text/javascript">
	$(function() {				
		// Resize ----------------------------------------------------
		$(window).resize(function() {
			initElementsSize();
		});			
	
		function initElementsSize(){
			// Set up content area size				
			$("#main-wrapper").height( $(window).height() - $("#main-nav").height() - $("header").height());
		}
		initElementsSize();
	
		// Initialize map ----------------------------------------------------			
		// TODO => initialization to be done dynamic with different providers
		var GMUtils = new taxi.GoogleMapsUtils();
		var mapViewer = new taxi.GoogleMapsViewer($("#map-container"),GMUtils);
		var geocoder = new taxi.GoogleMapsGeocoder(GMUtils);
		window.taxiEngine = new taxi.TaxiEngine(mapViewer,geocoder);			
		// Register events
		$(window.taxiEngine).bind(taxi.FARE_RESOLVED_EVENT, function(event,newVal){
			var section = $("#route-details-section");			
			//			
			$("#route-amount",section).hide();
			$("#route-amount-value",section).html(newVal.price+newVal.currency);
			$("#route-amount",section).fadeIn();
		});
		
		$(window.taxiEngine).bind(taxi.STATE_CHANGE_EVENT, function(event,newVal){
			console.debug("New application state: "+newVal);
			switch(newVal){
				case taxi.STATE_POPULATING:
					$("#route-details-section").hide();
					$("#calculate-button").show();
					break;
				case taxi.STATE_ROUTE_RETRIEVING:
					$("#route-details-section").hide();
					$("#calculate-button").hide();
					break;
				case taxi.STATE_ROUTE_RESOLVED:					
					$("#calculate-button").show();					
					$("#route-details-section").show();	
					break;
				case taxi.STATE_ROUTE_SHARING:
					$("#calculate-button").show();
					$("#mate-section").show();
					$("#route-details-section").show();	
					break;
			}
		});
		$(window.taxiEngine).bind(taxi.ROUTE_CHANGE_EVENT, function(event,currentRoute){
			if(currentRoute == undefined)
				return;			
			var section = $("#route-details-section");			
			//			
			$("#route-duration",section).html(currentRoute.durationText);
			$("#route-distance",section).html(currentRoute.distanceText);
			var steps = Mustache.to_html(routeSteps_tmpl, currentRoute);
			$("#route-steps",section).html(steps);			
		});		
		$(window.taxiEngine.getRouteManager()).bind(taxi.FROM_CHANGE_EVENT, function(event,newVal){		
			if(newVal != undefined){
				$("#from-address").val(newVal.addressString);
				$("#from-field .locating").hide();
				$("#from-field .locate").show();
				window.taxiEngine.drawFromLocation();
				window.taxiEngine.checkRouteResolution();
			} else {
				$("#from-address").val("");
				window.taxiEngine.clearFromLocation();
				window.taxiEngine.resetRoute();
			}
		});
		$(window.taxiEngine.getRouteManager()).bind(taxi.TO_CHANGE_EVENT, function(event,newVal){
			if(newVal != undefined){		
				$("#to-address").val(newVal.addressString);
				$("#to-field .locating").hide();
				$("#to-field .locate").show();
				window.taxiEngine.drawToLocation();
				window.taxiEngine.checkRouteResolution();
			} else {
				$("#to-address").val("");
				window.taxiEngine.clearToLocation();
				window.taxiEngine.resetRoute();
			}			
		});		

		// Input form UI events		
		$("#from-address").change(function(){
			window.taxiEngine.geocodeFromAddress($(this).val());
		});
		$("#to-address").change(function(){			
			window.taxiEngine.geocodeToAddress($(this).val());
		});

		$("#share-button").click(function(){
			window.taxiEngine.shareCurrentRoute();
		});		
		$("#calculate-button").click(function(){		
			window.taxiEngine.geocodeFromAddress($("#from-address").val());
			window.taxiEngine.geocodeToAddress($("#to-address").val());			
		});
		$("#reverse a").click(function(){			
			window.taxiEngine.getRouteManager().reverse();			
		});
		$("#from-field .locate").click(function(){
			$("#from-field .locating").show();
			$("#from-field .locate").hide();
			navigator.geolocation.getCurrentPosition(initFromLocation,initLocationError,{enableHighAccuracy:true,maximumAge:60000, timeout:taxi.GEO_TIMEOUT});
			return false;
		});
		$("#to-field .locate").click(function(){
			$("#to-field .locating").show();
			$("#to-field .locate").hide();			
			navigator.geolocation.getCurrentPosition(initToLocation,initLocationError,{enableHighAccuracy:true,maximumAge:60000, timeout:taxi.GEO_TIMEOUT});
			return false;
		});
		
		function initFromLocation(position) {	
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;
			taxiEngine.setCurrentPosition([lat,lon],new taxi.ResultHandler(this,function(address){
				window.taxiEngine.getRouteManager().setFromAddress(address);
				window.taxiEngine.centerView();
				window.taxiEngine.checkRouteResolution();
			}));				
			$("#dialog").dialog("close");
		}

		function initToLocation(position) {	
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;
			taxiEngine.setCurrentPosition([lat,lon],new taxi.ResultHandler(this,function(address){
				window.taxiEngine.getRouteManager().setToAddress(address);
				window.taxiEngine.centerView();
				window.taxiEngine.checkRouteResolution();
			}));				
			$("#dialog").dialog("close");
		}
		
		function initLocationError(error){
			// fail silently				
			$("#dialog").dialog("close");
			$("#to-field .locating").hide();
			$("#to-field .locate").show();
			$("#from-field .locating").hide();
			$("#from-field .locate").show();
		}

		// Start application ----------------------------------------------------			
		window.taxiEngine.init();
		if (Modernizr.geolocation) {
			$("#from-field .locating").show();
			$("#from-field .locate").hide();			
			$("#dialog").attr("title","Travelling...").text("We'll try to get your current position").dialog();
			navigator.geolocation.getCurrentPosition(initFromLocation,initLocationError,{enableHighAccuracy:true,maximumAge:1000, timeout:taxi.GEO_TIMEOUT});
		} else {			
			$(".locate").hide();			
		}
	});
</script>